<%--
  Created by IntelliJ IDEA.
  User: lirance
  Date: 16/3/17
  Time: 下午1:16
  To change this template use File | Settings | File Templates.
  显示用户以及服务列表
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
    <%-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"/>--%>
    <title>Qos预测</title>

    <link href="./css/amber-style.css" rel="stylesheet"/>
    <link href="./css/bootstrap.css">
    <link href="./css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style type="text/css"></style>

    <script src="./js/jquery-2.2.3.js"></script>
    <script src="./js/echarts-all.js"></script>
    <script src="./js/amber-script.js"></script>
    <script src="./js/amber-chart.js"></script>


    <script src="./js/bootstrap.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


</head>
<body>
<header>
    <div class="container">
        <p class="header-con-p">基于协同过滤的服务推荐系统</p>
    </div>
</header>
<div class="content">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="col-md-12">
                <div class="row-fluid">
                    <div class="col-md-3">
                        <div class="panel-group" id="accordion-821083" role="tablist" aria-multiselectable="true">
                            <div class="panel panel-default ">
                                <div class="panel-heading" role="tab" id="headingOne">
                                    <h4 class="panel-title">
                                        <a role="button" data-toggle="collapse" data-parent="#accordion"
                                           href="#accordion-element-289331" aria-expanded="true"
                                           aria-controls="collapseOne">
                                            Qos数据信息管理
                                        </a>
                                    </h4>
                                </div>
                                <div id="accordion-element-289331" class="panel-collapse collapse " role="tabpanel"
                                     aria-labelledby="headingOne">
                                    <div class="panel-body">
                                        <div class="panel-inner">
                                            <a href="#panel-425252" data-toggle="tab" style="color:black">
                                                用户信息管理
                                            </a>
                                        </div>
                                        <div class="panel-inner">
                                            <a href="#panel-316496" data-toggle="tab" style="color:black">
                                                web服务信息
                                            </a>

                                        </div>
                                        <div class="panel-inner">
                                            <a href="#panel-316497" data-toggle="tab" style="color:black">
                                                用户-web服务调用信息
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default ">
                                <div class="panel-heading" role="tab" id="headingTwo">
                                    <h4 class="panel-title">
                                        <a role="button" data-toggle="collapse" data-parent="#accordion"
                                           href="#accordion-element-691493" aria-expanded="true"
                                           aria-controls="collapseTwo">
                                            Web服务聚类
                                        </a>
                                    </h4>
                                </div>
                                <div id="accordion-element-691493" class="panel-collapse collapse " role="tabpanel"
                                     aria-labelledby="headingTwo">
                                    <div class="panel-body">
                                        <div class="panel-inner">
                                            <a href="#panel-425252" data-toggle="tab" style="color:black">
                                                Web服务层次聚类
                                            </a>
                                        </div>
                                        <div class="panel-inner">
                                            <a href="#panel-316496" data-toggle="tab" style="color:black">
                                                聚类结果分析
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default ">
                                <div class="panel-heading" role="tab" id="headingThree">
                                    <h4 class="panel-title">
                                        <a role="button" data-toggle="collapse" data-parent="#accordion"
                                           href="#accordion-element-691494" aria-expanded="true"
                                           aria-controls="collapseThree">
                                            Qos预测
                                        </a>
                                    </h4>
                                </div>
                                <div id="accordion-element-691494" class="panel-collapse collapse in" role="tabpanel"
                                     aria-labelledby="headingThree">
                                    <div class="panel-body">
                                        <div class="panel-inner">
                                            <a href="#panel-425252" data-toggle="tab" style="color:black">
                                                用户相似度分析与Qos预测
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default ">
                                <div class="panel-heading" role="tab" id="headingFour">
                                    <h4 class="panel-title">
                                        <a role="button" data-toggle="collapse" data-parent="#accordion"
                                           href="#accordion-element-691495" aria-expanded="true"
                                           aria-controls="collapseFour">
                                            预测结果评估
                                        </a>
                                    </h4>
                                </div>
                                <div id="accordion-element-691495" class="panel-collapse collapse " role="tabpanel"
                                     aria-labelledby="headingFour">
                                    <div class="panel-body">
                                        <div class="panel-inner">
                                            <a href="#panel-425252" data-toggle="tab" style="color:black">
                                                λ与预测结果的关系
                                            </a>
                                        </div>
                                        <div class="panel-inner">
                                            <a href="#panel-316496" data-toggle="tab" style="color:black">
                                                top-K与预测结果的关系
                                            </a>

                                        </div>
                                        <div class="panel-inner">
                                            <a href="#panel-316497" data-toggle="tab" style="color:black">
                                                聚类数目与预测结果的关系
                                            </a>
                                        </div>
                                        <div class="panel-inner">
                                            <a href="#panel-316498" data-toggle="tab" style="color:black">
                                                数据多少与预测结果的关系
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <script type="text/javascript">
                                $(function () {
                                    $('#accordion-element-289331').on('show.bs.collapse', function () {
                                        window.location.href = 'getListsAction';
                                    })
                                    $('#accordion-element-691493').on('show.bs.collapse', function () {
                                        window.location.href = 'getClustersAction';
                                    })
                                    $('#accordion-element-691494').on('show.bs.collapse', function () {
                                        window.location.href = 'qosAction.action';
                                    })
                                    $('#accordion-element-691495').on('show.bs.collapse', function () {
                                        window.location.href = 'result.jsp';
                                    })
                                });
                            </script>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="col-md-12" style="overflow-x: hidden; height:600px; width:820px">
                            <div style="width:818px">
                                <div class="panel panel-success">
                                    <!-- 面板1 -->
                                    <!-- Default panel contents -->
                                    <div class="panel-heading amber-font">
                                        <span class="glyphicon glyphicon-import"></span>&nbsp; 用户相似度计算输入区域
                                    </div>
                                    <div class="panel-body">
                                        <%--<form class="form-search form-inline" method="post">--%>
                                        <form class="form-inline amber-margin-top10" method="post">
                                            <div class="form-group amber-font-20">
                                                用户Id:
                                                <div class="input-group">
                                                    <div class="input-group-addon">用户1:</div>
                                                    <input type="number" class="form-control" id="uid1" name="uid1"
                                                           placeholder="">
                                                </div>
                                                <div class="input-group">
                                                    <div class="input-group-addon">用户2:</div>
                                                    <input type="number" class="form-control" id="uid2" name="uid2"
                                                           placeholder="">
                                                </div>
                                            </div>
                                            <button type="submit" class="btn btn-primary"
                                                    onclick="window.location.href='qosAction.action'"
                                                    contenteditable="true">
                                                执行
                                            </button>
                                        </form>
                                    </div>
                                </div>
                                <!-- 面板1 -->


                                <div class="panel panel-danger">
                                    <!-- 面板2 -->
                                    <!-- Default panel contents -->
                                    <div class="panel-heading amber-font">
							<span class="glyphicon glyphicon-export"
                                  style="margin-bottom:10px;"></span>&nbsp; 用户相似度
                                    </div>

                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="value">
                                                <h1 id="similarity" class="amber-h-50">
                                                    <s:iterator var="sim" value="similarity">
                                                        <span>${sim}</span>
                                                    </s:iterator>
                                                </h1>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <!-- 面板2 -->


                                <div class="panel panel-success">
                                    <!-- 面板1 -->
                                    <!-- Default panel contents -->
                                    <div class="panel-heading amber-font">
                                        <span class="glyphicon glyphicon-import"></span>&nbsp; Qos预测输入区域
                                    </div>
                                    <div class="panel-body">

                                        <form class="form-inline" method="post">
                                            <div class="form-group amber-font-20">
                                                预测方式:
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-info" id="modelSelect"
                                                            name='model0'>非聚类方式
                                                    </button>
                                                    <button type="button" class="btn btn-info dropdown-toggle"
                                                            data-toggle="dropdown">
                                                        <span class="caret"></span>
                                                    </button>
                                                    <ul class="dropdown-menu" role="menu" id="modelSelectUl">
                                                        <li><a name="model0">非聚类方式</a></li>
                                                        <li><a name="model1">聚类方式</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <br/><br/>

                                            <div class="form-group amber-font-20">
                                                用 户 Id &nbsp;:
                                                <div class="input-group">
                                                    <input type="number" class="form-control" id="uid" name="uid"
                                                           placeholder="">
                                                </div>
                                                服务 Id &nbsp;:
                                                <div class="input-group">
                                                    <input type="number" class="form-control" id="sid" name="sid"
                                                           placeholder="">
                                                </div>
                                            </div>
                                            <br/><br/>

                                            <div class="form-group amber-font-20">
                                                &nbsp;&nbsp;参&nbsp;&nbsp;&nbsp;数&nbsp;&nbsp;:
                                                <div class="input-group">
                                                    <div class="input-group-addon">λ:</div>
                                                    <select class="form-control" id="lmd" name="lmd" type="number">
                                                        <option value="0.0">0.0</option>
                                                        <option value="0.1">0.1</option>
                                                        <option value="0.2">0.2</option>
                                                        <option value="0.3">0.3</option>
                                                        <option value="0.4">0.4</option>
                                                        <option value="0.5">0.5</option>
                                                        <option value="0.6">0.6</option>
                                                        <option value="0.7">0.7</option>
                                                        <option value="0.8">0.8</option>
                                                        <option value="0.9">0.9</option>
                                                        <option value="1.0">1.0</option>
                                                    </select>
                                                </div>
                                                <div class="input-group">
                                                    <div class="input-group-addon">k:</div>
                                                    <%--<input type="number" class="form-control" id="k" name="k"
                                                           placeholder="">--%>
                                                    <select class="form-control" id="k" name="k" type="number">
                                                        <option value="5">5</option>
                                                        <option value="10">10</option>
                                                        <option value="15">15</option>
                                                        <option value="20">20</option>
                                                        <option value="25">25</option>
                                                        <option value="30">30</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <br/><br/>

                                            <div id="form-area1">
                                            </div>
                                            <div id="form-area2" style="display:none;">
                                                <div class="form-group amber-font-20">
                                                    聚类个数:
                                                    <div class="input-group">
                                                        <%-- <input type="number" class="form-control" id="cluNum"
                                                                name="cluNum"
                                                                placeholder="">--%>
                                                        <select class="form-control" id="cluNum" name="cluNum">
                                                            <option value="0">0</option>
                                                            <option value="5">5</option>
                                                            <option value="10">10</option>
                                                            <option value="15">15</option>
                                                            <option value="15">25</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <%-- </form>--%>
                                            </div>
                                            <button type="submit" class="btn btn-primary btn-large"
                                                    onclick="window.location.href='qosAction.action'"
                                                    contenteditable="true">
                                                执行
                                            </button>
                                        </form>
                                    </div>
                                </div>
                                <!-- 面板1 -->


                                <div class="panel panel-danger">
                                    <div class="panel-heading amber-font">
                                        <span class="glyphicon glyphicon-export" style="margin-bottom:10px;">
                                        </span>&nbsp; Qos预测结果（用户对服务的访问时间）
                                    </div>
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="value">
                                                <h1 id="similarity1" class="amber-h-50">
                                                    <s:iterator var="sl" value="wslist">
                                                        <span>${sl.clusteNum}</span>
                                                    </s:iterator>
                                                </h1>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div id="printTable"></div>
                            <div class=row>
                                <div class="col-md-6" id="printPage"></div>
                                <div class="col-md-6" id="printPage_f"></div>
                            </div>

                        </div>
                        <!-- 面板2 -->

                        <!--↑↑↑ 内容 ↑↑↑-->

                        <script type="text/javascript">

                            var url = "qosEvaluateAction.action";
                            var modelName = "model0";

                            var rtEnThreshold = 0;
                            var rtHeThreshold = 0;
                            var reThresholdOfCloud = 0;

                            var rtCvThreshold = 0;
                            var reThresholdOfCv = 0;

                            $("#rt-input1").val("1000");
                            $("#rt-input2").val("1000");
                            $("#re-input1").val("1");

                            $("#rt-input3").val("100");
                            $("#re-input2").val("1");
                            /*
                             $("#test").load(SendUrl,{
                             serverId : 16423
                             });
                             */
                            /*下拉菜单样式*/
                            $("#modelSelectUl a").click(function () {
                                $("#modelSelect").text($(this).text());
                                var name = $(this).attr("name");
                                $("#modelSelect").attr("name", name);
                                modelName = name;
                                if (modelName == "model0") {
                                    $("#form-area2").hide();
                                    $("#form-area1").fadeIn(500);
                                } else if (modelName == "model1") {
                                    $("#form-area1").hide();
                                    $("#form-area2").fadeIn(500);
                                }
                            });

                            $("#execute-btn").click(
                                    function () {
                                        rtEnThreshold = $("#rt-input1").val();
                                        rtHeThreshold = $("#rt-input2").val();
                                        reThresholdOfCloud = $("#re-input1").val();

                                        rtCvThreshold = $("#rt-input3").val();
                                        reThresholdOfCv = $("#re-input2").val();

                                    });
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</div>
</body>
</html>